<template>
  <div class="subscription-info" v-if="showInfo">
    <a-card size="small" class="subscription-card">
      <template #title>
        <div class="subscription-title">
          <crown-outlined :style="{ color: subscriptionColor }" />
          <span>会员状态</span>
        </div>
      </template>
      
      <div class="subscription-content">
        <div class="subscription-tier">
          <a-tag :color="subscriptionColor" size="large">
            {{ subscriptionTierText }}
          </a-tag>
        </div>
        
        <!-- 有活跃订阅时显示详细信息 -->
        <div class="subscription-details" v-if="hasActiveSubscription">
          <p class="detail-item">
            <calendar-outlined />
            <span>到期时间: {{ formatDate(currentSubscription.end_date) }}</span>
          </p>
          <p class="detail-item">
            <clock-circle-outlined />
            <span>剩余天数: {{ daysRemaining }} 天</span>
          </p>
          <p class="detail-item" v-if="currentSubscription.pricing_plan">
            <file-text-outlined />
            <span>提示词上限: {{ currentSubscription.pricing_plan.prompt_limit || '无限制' }}</span>
          </p>
        </div>
        
        <!-- 无订阅时显示友好提示 -->
        <div class="no-subscription-info" v-else>
          <p class="no-subscription-text">
            <gift-outlined />
            <span>您当前是免费用户，升级会员享受更多特权</span>
          </p>
          <div class="benefits-list">
            <p class="benefit-item">
              <check-circle-outlined />
              <span>无限制创建提示词</span>
            </p>
            <p class="benefit-item">
              <check-circle-outlined />
              <span>高级AI模型访问</span>
            </p>
            <p class="benefit-item">
              <check-circle-outlined />
              <span>优先客服支持</span>
            </p>
          </div>
        </div>
        
        <div class="subscription-actions">
          <a-button 
            type="primary" 
            size="small" 
            @click="goToPricing"
            :loading="loading"
            class="subscribe-button"
          >
            {{ hasActiveSubscription ? '升级会员' : '立即订阅' }}
          </a-button>
          
          <!-- 无订阅时显示额外的查看详情按钮 -->
          <a-button 
            v-if="!hasActiveSubscription"
            type="default" 
            size="small" 
            @click="goToPricing"
            class="view-plans-button"
          >
            查看套餐
          </a-button>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../store/auth';
import { useSubscriptionStore } from '../store/subscription';
import { 
  CrownOutlined, 
  CalendarOutlined, 
  ClockCircleOutlined, 
  FileTextOutlined,
  GiftOutlined,
  CheckCircleOutlined
} from '@ant-design/icons-vue';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';

export default {
  name: 'UserSubscriptionInfo',
  components: {
    CrownOutlined,
    CalendarOutlined,
    ClockCircleOutlined,
    FileTextOutlined,
    GiftOutlined,
    CheckCircleOutlined
  },
  props: {
    showWhenNotLoggedIn: {
      type: Boolean,
      default: false
    },
    compact: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const router = useRouter();
    const authStore = useAuthStore();
    const subscriptionStore = useSubscriptionStore();

    const showInfo = computed(() => {
      return authStore.isAuthenticated || props.showWhenNotLoggedIn;
    });

    const currentSubscription = computed(() => subscriptionStore.currentSubscription);
    const hasActiveSubscription = computed(() => subscriptionStore.hasActiveSubscription);
    const subscriptionTier = computed(() => subscriptionStore.subscriptionTier);
    const daysRemaining = computed(() => subscriptionStore.daysRemaining);
    const loading = computed(() => subscriptionStore.loading);

    const subscriptionTierText = computed(() => {
      if (!hasActiveSubscription.value) return '免费用户';
      
      const tierMap = {
        'basic': '基础会员',
        'premium': '高级会员',
        'enterprise': '企业会员'
      };
      
      return tierMap[subscriptionTier.value] || currentSubscription.value?.pricing_plan?.name || '会员用户';
    });

    const subscriptionColor = computed(() => {
      if (!hasActiveSubscription.value) return 'default';
      
      const colorMap = {
        'basic': 'blue',
        'premium': 'gold',
        'enterprise': 'purple'
      };
      
      return colorMap[subscriptionTier.value] || 'blue';
    });

    const formatDate = (dateString) => {
      try {
        return format(new Date(dateString), 'yyyy年MM月dd日', { locale: zhCN });
      } catch (e) {
        return dateString;
      }
    };

    const goToPricing = () => {
      router.push('/pricing');
    };

    return {
      showInfo,
      currentSubscription,
      hasActiveSubscription,
      subscriptionTier,
      subscriptionTierText,
      subscriptionColor,
      daysRemaining,
      loading,
      formatDate,
      goToPricing
    };
  }
};
</script>

<style scoped>
.subscription-info {
  margin-bottom: 16px;
}

.subscription-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.subscription-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.subscription-content {
  padding: 8px 0;
}

.subscription-tier {
  margin-bottom: 12px;
  text-align: center;
}

.subscription-details {
  margin-bottom: 16px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.detail-item:last-child {
  margin-bottom: 0;
}

.no-subscription-info {
  margin: 12px 0;
}

.no-subscription-text {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  margin-bottom: 12px;
  font-size: 14px;
}

.benefits-list {
  margin: 8px 0;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #52c41a;
  margin: 4px 0;
  font-size: 13px;
}

.subscription-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.subscribe-button {
  flex: 1;
}

.view-plans-button {
  flex: 0 0 auto;
}

.subscription-actions .ant-btn {
  border-radius: 6px;
}
</style>